﻿@model ScrumTracker.Models.Product
@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout3.cshtml";
}
@if (false)
{
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
@section head{
    <style type="text/css">
        .list
        {
            text-align: center;
            width: 100%;
            border-collapse: collapse;
        }
        
        tbody > tr:nth-child(odd)
        {
            background-color: #eee;
        }
        
        tbody > tr:hover
        {
            background-color: Yellow;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs(
            {
                cookie: {},
                select: function (event, ui) {
                    console.log(event);
                    console.log(ui);
                    location.hash = ui.tab.hash;
                },
                create: function (event, ui) {
                    $(this).tabs('select', location.hash);
                }
            });

            $('#btnAddSprint').button({
                icons: {
                    primary: "ui-icon-plus"
                }
            }).click(function () {
                $("#addSprintDialog").dialog("destroy");
                $("#addSprintDialog").dialog({
                    modal: true,
                    resizable: false,
                    close: function (event, ui) {
                        //loadBacklog();
                    }
                });
            });

            $('a[rel=editSprint]').click(function (e) {
                e.preventDefault();
                $('#editSprintDialog').load($(this).attr('href'), null, function (e) {
                    $(this).html(e);
                    $("#editSprintDialog").dialog("destroy");
                    $("#editSprintDialog").dialog({
                        modal: true,
                        resizable: false,
                        close: function (event, ui) {
                            //loadBacklog();
                        }
                    });
                });
            });

            //            $('form[ajax=1]').submit(function (e) {
            //                if ($(this).valid()) {
            //                    //e.preventDefault();
            ////                    $.post($(this).attr('action'), $(this).serializeArray(), function (data) {
            ////                        console.log(data);
            ////                    }, "json")
            //                }
            //            });
        });
    </script>
}
<div id="tabs" style="overflow: hidden;">
    <ul>
        <li>
            <a href="#tabs-1">Product Information</a></li>
        <li>
            <a href="#sprints">Sprints</a></li>
    </ul>
    <div id="tabs-1">
        <div style="float: left;">
            @using (Html.BeginForm("Update", "Products", FormMethod.Post))
            {
                @Html.HiddenFor(m => m.ProductId)
                <div>
                    <label style="display: block;">Name</label>
                    @Html.EditorFor(m => m.Name)
                </div>
                <div style="margin-top: 8px; text-align: right;">
                    <input type="submit" value="Update" class="button" /></div>
            }
        </div>
        <div style="clear: both;">
        </div>
    </div>
    <div id="sprints">
        <div style="text-align: right;">
            <a id="btnAddSprint">Add Sprint</a>
        </div>
        <div id="addSprintDialog" title="Add Sprint" style="overflow: hidden; padding: 3px 0 3px 0; display: none;">
            @Html.Partial("~/Views/Sprints/_New.cshtml", new Sprint() { ProductId = Model.ProductId, EndDate = DateTime.UtcNow })
        </div>
        <div id="editSprintDialog" title="Edit Sprint" style="overflow: hidden; padding: 3px 0 3px 0; display: none;">
            loading...
        </div>
        <table class="list ui-widget ui-widget-content" style="margin-top: 0.2em;">
            <thead class="ui-widget-header">
                <tr>
                    <th>
                        Sprint
                    </th>
                    <th>
                        End Date
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var sprint in Model.Sprints)
                { 
                    <tr class="">
                        <td>@sprint.Name
                        </td>
                        <td>@sprint.EndDate
                        </td>
                        <td>
                            <a href="@Url.Action("Edit", "Sprints", new { @id = sprint.SprintId })" rel="editSprint">Edit</a> <a href="#">Delete</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
